<template lang="pug">
    .menu-container
        .layout-aside(:class='{ narrow: asideNarrow }')
            .aside-menu-container
                .menu-layout(v-for='item in menuList')
                    el-popover(v-if="item.isShow" popper-class="pop-class" placement="right" trigger="hover" :disabled="showPop(item)")
                        .pop-item(v-if="cItem.isShow" :class='{active: isItemActive(cItem)}' v-for="cItem in item.children" @click='handleChildChangeMenu(cItem)') {{cItem.permission_name}}
                        .menu-item(:class='{active: isItemActive(item)}' :key='item.path' @click='handleChangeMenu(item)' slot="reference")
                            .content
                                el-tooltip(placement="right" :content="item.permission_name" :disabled='!asideNarrow')
                                    i.icon(:class='item.icon')
                                .title {{ item.permission_name }}
                    el-collapse-transition
                        .menu-child(v-if="isHaveChild(item.children)" v-show="item.childrenExpand")
                            .child-item(v-for="cItem in item.children")
                                .menu-item(v-if="cItem.isShow" :class='{active: isItemActive(cItem)}' :key='cItem.path' @click='handleChildChangeMenu(cItem)')
                                    .content
                                        .singleTitle {{ cItem.permission_name }}
            .aside-narrow-container
                .icon-narrow(@click='handleChangeMenuNarrow')
                    i(:class='asideNarrow ? "yd-icon-s-unfold" : "yd-icon-s-fold"')
</template>

<script>
import _ from "lodash-es";
export default {
  name: "aside-layout",
  data() {
    return {
      asideNarrow: false,
    };
  },
  computed: {
    menuList() {
      const menuList = _.cloneDeep(this.$store.state.aside.globalMenuList);
      return menuList;
    },
  },
  methods: {
    // 收缩状态
    handleChangeMenuNarrow() {
      this.asideNarrow = !this.asideNarrow;
    },
    // 父级点击触发
    handleChangeMenu(item) {
      if (this.isHaveChild(item.children)) {
        if (!this.asideNarrow) {
          item.childrenExpand = !item.childrenExpand;
        }
        this.$forceUpdate();
      } else {
        this.$router.replace({ path: item.path, query: { ...item.query } });
      }
    },
    // 子级点击触发
    handleChildChangeMenu(item) {
      this.$router.replace({ path: item.path, query: { ...item.query } });
    },
    // 是否是激活态
    isItemActive(menu) {
      const { path, children, pageName, subPermission } = menu;
      const isActiveRoute =
        this.$route.path === path &&
        (pageName ? this.$route.query.pageName === pageName : true);
      const hasActiveSubPermission =
        subPermission &&
        subPermission.some((item) => item.path === this.$route.path);
      const hasActiveChild =
        children &&
        children.some((item) => item.path === this.$route.path && item.isShow);
      if (!this.asideNarrow) {
        return isActiveRoute || hasActiveSubPermission;
      }
      return isActiveRoute || hasActiveChild;
    },
    // 是否有可展示的子级
    isHaveChild(children) {
      return children && children.some((child) => child.isShow !== false);
    },
    // 是否展现popover
    showPop(item) {
      if (!this.asideNarrow) {
        return true;
      }
      return !this.isHaveChild(item.children);
    },
    // 过滤掉isShow为false的菜单
    filterHidePath(data) {
      return data
        .filter((item) => item.isShow)
        .map((item) => {
          if (item.children) {
            const filteredChildren = this.filterHidePath(item.children);
            return {
              ...item,
              children: filteredChildren.length > 0 ? filteredChildren : null,
            };
          }
          return item;
        });
    },
  },
};
</script>

<style lang="scss">
.el-popover.pop-class {
  padding: 10px 12px 5px 12px;
}

.pop-item {
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  cursor: pointer;
  border-radius: 3px;
  color: $--color-N2;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 5px;

  &:hover,
  &.active {
    color: $--color-primary;
    background-color: #e6e9f2;
  }
}
</style>

<style lang="scss" scoped>
// 侧边栏展开宽度
$aside-width: 200px;

// 侧边栏收缩宽度
$aside-narrow-width: 62px;

.menu-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  position: relative;
}

.layout-aside {
  width: $aside-width;
  background-color: $--color-N8;
  transition: width 0.3s;

  &.narrow {
    width: $aside-narrow-width;

    .menu-item {
      padding-right: 0;
      margin-bottom: 3px;
      justify-content: center;
    }

    .menu-child {
      display: none;
    }

    .content {
      .title {
        display: none;
      }
    }

    .aside-narrow-container {
      justify-content: center;
    }

    .icon-narrow {
      margin-right: 6px;
    }
  }

  .aside-menu-container {
    height: calc(100% - 40px);
    padding-left: 8px;
    padding-right: 8px;
    overflow-y: auto;
    padding-top: 16px;
    @include beautiful-scrollbar();
  }

  .menu-item {
    display: flex;
    align-items: center;
    height: 40px;
    font-family: PingFang SC;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 3px;
    cursor: pointer;
    border-radius: 5px;
    color: $--color-N2;

    &:hover,
    &.active {
      color: $--color-primary;
      background-color: #e6e9f2;
    }
  }

  .content {
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;

    i {
      font-size: 16px;
      line-height: 1.8px;
    }

    .title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-left: 8px;
    }

    .singleTitle {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-left: 24px;
    }
  }

  .aside-narrow-container {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: right;
  }

  .icon-narrow {
    margin-right: 19px;
    cursor: pointer;
    color: $--color-N3;

    i:hover {
      color: $--color-B;
    }
  }

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
